<template>
  <div class="search-pop" v-if="visibleSearchPop">
    <img src="../../../../../assets/images/situational-awareness/search-close.png" alt="" srcset="" class="close" @click="onCloseSearchPop" />
    <div class="search-pop-content">
      <div class="search-pop-content-item">
        <div>公交公司</div>
        <input type="text" placeholder="请输入关键字" v-model="companyValue" />
      </div>
      <div class="search-pop-content-item">
        <div>线&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;路</div>
        <input type="text" placeholder="请输入关键字" v-model="lineValue" />
      </div>
      <div class="search-pop-content-item">
        <div>类&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;型</div>
        <nanning-screen-select :options="dateOptions" @on-change-value="onChangeSelect" class="search-type"></nanning-screen-select>
      </div>
      <div class="search-pop-content-button" @click="onClickSearch">搜索</div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Emit } from 'vue-property-decorator'
import Bus from 'utils/eventBus'
@Component({
  name: 'search-pop'
})
export default class SearchPop extends Vue {
  private visibleSearchPop = false

  private dateOptions: Array<any> = [
    { value: '1', label: '刑事案件' },
    { value: '2', label: '刑事案' }
  ]

  private selectValue = this.dateOptions[0].value

  private companyValue = '' // 公司

  private lineValue = '' // 线路

  private onChangeSelect(e: any) {
    console.log('下拉框', e)
    this.selectValue = e
  }

  @Emit()
  private onClickSearch() {
    // 点击搜索的时候  拿到所有的value
    Bus.$emit('onClickProhibitedSearch', {
      companyValue: this.companyValue,
      lineValue: this.lineValue,
      selectValue: this.selectValue
    })

    this.clearValue()
  }

  private onCloseSearchPop() {
    this.clearValue()
  }

  private clearValue() {
    this.visibleSearchPop = false
    // 清空上一次的值
    this.companyValue = ''
    this.lineValue = ''
    this.selectValue = ''
  }

  created() {
    // 弹框打开事件
    Bus.$off('openProhibitedSearchPop')
    Bus.$on('openProhibitedSearchPop', (value: any) => {
      this.visibleSearchPop = value.visibleSearchPop
    })
  }
}
</script>

<style lang="scss" scoped>
.search-pop {
  box-sizing: border-box;
  width: 328px;
  height: 248px;
  background: url('../../../../../assets/images/situational-awareness/search-pop-bac.png') no-repeat center;
  background-size: 100% 100%;
  position: relative;
  padding: 27px 26px 0 20px;
  font-family: 'PingFang Regular';
  .close {
    width: 30px;
    height: 30px;
    position: absolute;
    right: -25px;
    top: -30px;
  }
  &-content {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    &-item {
      display: flex;
      height: 34px;
      align-items: center;
      margin-bottom: 14px;
      div:nth-child(1) {
        width: calc(100% - 200px);
        font-size: 16px;
        font-weight: 500;
        margin-right: 12px;
        color: #fff;
      }
      .search-type {
        box-sizing: border-box;
        width: 200px;
      }
      .search-type /deep/ .el-select .el-input .el-input__inner {
        box-sizing: border-box;
        width: 200px;
        height: 34px !important;
        background: #092675;
        border: 1px solid #194ba9;
      }
      input {
        box-sizing: border-box;
        width: 200px;
        height: 100%;
        background: none;
        outline: none;
        border: none;
        background: #092675;
        color: rgba(255, 255, 255, 0.7);
        font-size: 16px;
        font-family: 'PingFang Regular';
        border: 1px solid #194ba9;
        border-radius: 4px;
        padding-left: 16px;
        flex-shrink: 0;
      }
      //设置占位符字体颜色为红色
      input::-webkit-input-placeholder {
        /* WebKit browsers */
        color: rgba(255, 255, 255, 0.7);
        font-size: 14px;
        font-family: 'PingFang Regular';
      }
      input:-moz-placeholder {
        /* Mozilla Firefox 4 to 18 */
        color: rgba(255, 255, 255, 0.7);
      }
      input::-moz-placeholder {
        /* Mozilla Firefox 19+ */
        color: rgba(255, 255, 255, 0.7);
        font-size: 14px;
      }
      input:-ms-input-placeholder {
        /* Internet Explorer 10+ */
        color: rgba(255, 255, 255, 0.7);
        font-size: 14px;
      }
    }
    &-button {
      width: 86px;
      height: 36px;
      margin: 25px auto 0;
      line-height: 36px;
      background: #3678ff;
      border-radius: 18px;
      font-size: 16px;
      font-weight: 500;
      color: #fefefe;
      text-align: center;
    }
  }
}
</style>
